<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="title"><i class="el-icon-caret-right" /> 选择单位</div>
        <div>
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </el-col>
      <el-col :span="20" class="call-container">
        <div class="user-list">
          <div class="title">
            <i class="el-icon-caret-right" />
            选择人员
          </div>
          <div class="log-content">
            <el-table v-loading="loading" :data="bookData" size="mini" @selection-change="handleSelectionChange"
              row-key="userId">
              <el-table-column type="selection" width="55" :reserve-selection="true" />
              <el-table-column label="姓名" align="center" prop="nickName" />
              <el-table-column label="岗位" align="center" prop="postName" />
              <el-table-column label="手机号" align="center" prop="phonenumber">
                <template slot-scope="scope">
                  <div v-if="scope.row.phonenumber != null">
                    {{ scope.row.phonenumber }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="userQueryForm.pageNum"
              :limit.sync="userQueryForm.pageSize" @pagination="getUsers" />
          </div>
        </div>
        <div class="msg-container">
          <div class="title">
            <i class="el-icon-caret-right" />
            发送列表
          </div>
          <div class="msg-users">
            <template v-if="selectedUsers.length > 0">
              <el-tag :key="tag.userId" v-for="tag in selectedUsers" size="mini">
                {{ tag.nickName }}
              </el-tag>
            </template>
            <template v-else>
              <div class="empty-users">
                无发送对象<br />请在左侧选择用户
              </div>
            </template>
          </div>
          <div class="msg-btns">
            <el-button type="primary" icon="el-icon-message" :disabled="selectedUsers.length == 0"
              @click="handleBatchSend">批量发送</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :style="{ marginTop: '20px' }">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>短信发送记录</span>
          </div>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="60px">
            <el-form-item label="号码:" prop="cnname">
              <el-input v-model="queryParams.cnname" placeholder="请输入号码" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="联系人:" prop="enname">
              <el-input v-model="queryParams.enname" placeholder="请输入联系人" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="时间:" prop="optime">
              <el-date-picker clearable v-model="form.optime" type="date" value-format="yyyy-MM-dd" placeholder="请选班时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini">重置</el-button>
            </el-form-item>
          </el-form>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="已发送" name="first">
              <Beensent />
            </el-tab-pane>
            <el-tab-pane label="已接收" name="second">
              <Beensent />
            </el-tab-pane>
            <el-tab-pane label="草稿箱" name="third">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="号码" width="200" align="center">
                </el-table-column>
                <el-table-column prop="date" label="日期" width="200" align="center">
                </el-table-column>
                <el-table-column prop="address" label="短信内容" align="center" class-name="small-padding fixed-width">
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="fillinthe(scope.row)">编辑
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="newdelete">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total > 0" :total="total" :page.sync="userQueryForm.pageNum"
                :limit.sync="userQueryForm.pageSize" @pagination="getUsers" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <batch-sms ref="batchSmsDialog" />
  </div>
</template>
<script>
import { list } from "../../../api/monitor/logininfor";
import Beensent from "./components/beensent.vue";
import { treeselect } from "@/api/system/dept";
import { listUser } from "@/api/guard/addressbook";
import BatchSms from './components/BatchSms.vue'

export default {
  components: {
    Beensent,
    BatchSms
  },
  name: "GuardJoinReport",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "deptName",
      },
      // 短信
      dynamicTags: [],
      activeName: "first",
      total: 0,
      newlist: true,
      tableData: [
        {
          date: "18230562907",
          name: "任弘盛",
          address:
            "2022年8月11日18点16分，接到相关部门报送，航班HA1233在禄口机场附近正常起飞，请知悉！",
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        planid: null,
        filename: null,
        attachcontent: null,
      },
      checkList: ["选中且禁用", "复选框 A"],
      labelPosition: "left",
      title: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      open: false,
      currentPage4: 1,
      options: [
        {
          value: "HTML",
          label: "HTML",
        },
        {
          value: "CSS",
          label: "CSS",
        },
        {
          value: "JavaScript",
          label: "JavaScript",
        },
      ],
      openabc: [],
      value: "",
      userQueryForm: {
        pageNum: 1,
        pageSize: 6,
      },
      bookData: [],
      total: 0,
      loading: false,
      selectedUsers: []
    };
  },
  mounted() {
    this.getDept();
  },
  methods: {
    getDept() {
      const that = this;
      treeselect().then((res) => {
        that.data = res.data;
      });
    },
    handleNodeClick(data) {
      this.userQueryForm.deptId = data.deptId;
      this.getUsers();
    },
    getUsers() {
      const that = this;
      listUser(this.userQueryForm).then((res) => {
        console.log(res);
        that.bookData = res.rows;
        that.total = res.total;
      });
    },
    newissue() {
      this.open = true;
    },
    cancel() {
      this.open = false;
    },
    onSubmit() { },
    handleDialogClose() { },
    handleChange() { },
    handleSizeChange() { },
    handleCurrentChange() { },
    // 底部
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSelectionChange(selection) {
      this.selectedUsers = selection;
    },
    //短信
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    // 填入
    fillinthe(row) {
      if (this.dynamicTags.indexOf(row.name) == "-1") {
        this.dynamicTags.push(row.name);
        this.form.desc = row.address;
      }
    },
    //删除
    newdelete() {
      this.$confirm("删除草稿短信后，不可找回，请谨慎操作。", "删除草稿", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addToMessageList(number) {
      if (this.dynamicTags.indexOf(number) == "-1") {
        this.dynamicTags.push(number);
      }
    },
    handleBatchSend() {
      this.$refs.batchSmsDialog.show(this.selectedUsers);
    }
  },
};
</script>
<style lang="scss" scoped>
.call-container {
  display: flex;

  .user-list {
    flex: 1;
  }

  .msg-container {
    width: 320px;
    margin-left: 20px;

    .msg-users {
      padding: 10px;
      border: 1px solid #009dfa;
      min-height: 265px;
      overflow: auto;

      .el-tag {
        margin: 10px 10px 0 0;
      }

      .empty-users {
        width: inherit;
        height: 245px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #409eff;
        font-size: 13px;
        text-align: center;
        line-height: 30px;
      }
    }

    .msg-btns {
      margin-top: 20px;

      .el-button {
        width: 100%;
      }
    }
  }
}


.title {
  margin-bottom: 10px;
  font-weight: bold;
  color: #409eff;
  display: flex;
  align-items: center;

  i {
    margin-right: 5px;
  }

  .tools {
    text-align: right;
    flex: 1;
  }
}

.model-header {
  height: 40px;
  line-height: 40px;
  color: #009dfa;
}

.row-bg {
  padding: 10px 0;
  line-height: 35px;
}

.avatar {
  width: 80px;
  height: 80px;
}

.el-input .el-input--medium .el-input--suffix {
  height: 200px;
}

.avatar img {
  width: inherit;
  height: inherit;
}

.list {
  margin-right: 10px;
  background: rgb(0, 119, 255);
  padding: 5px;
}

.info {
  flex: 1;
  display: flex;
  flex-flow: column;
  margin-left: 10px;
}

.name {
  flex: 1;
  font-size: 18px;
  border-bottom: 1px solid grey;
  margin-top: 10px;
  color: white;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.el-tag--medium {
  margin-left: 10px;
}

.name span {
  font-size: 13px;
  margin-left: 10px;
  color: grey;
}

.address-card ::v-deep .el-card__body {
  display: flex;
  flex-flow: row;
}
</style>
